<?php

session_start();
require_once("classes/facebook.php");
$facebook = new Facebook();

?>

<!DOCTYPE html>

<html>

<head>

	<title>Giftful</title>
	
	<link rel="stylesheet" href="css/styles.css" type="text/css">	
    <link rel="stylesheet" type="text/css" href="css/suggestBox.css"/>
	<link rel="stylesheet" type="text/css" href="css/jquery.auto.css"/>
    
    <script type="text/javascript">

		var testData = {};
		testData.webSites = <? echo $facebook -> get_friends(); ?>;

	</script>

</head>

<body>
<!--Striped Pattern-->
	<div id="stripesLine">
	</div>

<!--Orange Stripe-->
	<div id="orangeStripe">
	</div>

	<!-- content -->
	<div id="content">
		<div id="labelSmall">
		</div>
		<div id="friendPicker">
			<form>
				<label for="what">Hmm... What should I give</label> </br>
				<input type="text" name="what" id="autoFriend" class="inputField"/> </br>
				<label for="for">for</label> </br>
				<div id="occassionDiv">
					<select name="occasion" id="occasionInput">
						<option>Birthday</option>
						<option>Valentine's Day</option>
						<option>Christmas</option> 
						<option>Halloween</option> 
						<option>Hannukah</option> 
						<option>New Year's Eve</option>
						<option>Kings' Day</option> 
					 </select>
				</div>
			</form>
		</div>
        
		<div class="questionMark" onClick="redirect();">
		</div>
	</div>
	
</body>

<script language="JavaScript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" src="js/jquery.jsonSuggest.js"></script>
<script language="JavaScript" src="js/json2.js"></script>
<script>
var x;
var y;
function callback(item) {
	x = item.name;
	y = item.id;
}
function redirect(){
	var z = document.getElementById("occasionInput").value;
	document.location = 'recommendations.php?person=' + x + "&id=" + y + "&occasion=" + z;	
}
jQuery(function() {
	$('input#autoFriend').jsonSuggest(testData.webSites, {onSelect: callback});
});
</script>

</html>